<template>
  <div class="course-list flex-r-start flex-wrap" style="width: 100%;">
    <div
      class="item"
      style="width: 25%;box-sizing: border-box;padding: 10px; flex-shrink: 0;"
      v-for="item in List"
      :key="item.courseId"
      @click="toDetail(item)"
    >
      <el-card>
        <div class="img-container">
          <el-image style="width: 100%; height: 155px;" :src="item.qbCover">
            <div slot="error" class="image-slot">
              <i class="el-icon-picture-outline"></i>
            </div>
          </el-image>
        </div>
        <el-tooltip effect="dark" :content="item.qbName" placement="top">
          <div class="pl10 font-weight font20 mb5 text-ellipsis-1">课程名称：{{ item.qbName }}</div>
        </el-tooltip>
        <div class="pl10 mb10 grey">描述：{{ item.qbDesc }}</div>
        <div class="pl10 grey">题库模式：{{ qsModel[item.qbPattern] }}</div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: "q-card",
  props: {
    List: {
      type: Array,
      default: () => []
    },
    qsModel: {
      type: Object,
      default: () => ({})
    }
  },
  methods: {
    toDetail(item) {
      window.sessionStorage.setItem("qbObj", JSON.stringify(item));
      this.$emit("click", item.qbId);
    }
  }
};
</script>

<style>
.course-list .el-card {
  border-radius: 10px !important;
  cursor: pointer;
}
.course-list .el-card .el-card__body {
  padding: 0 0 20px 0 !important;
}
.img-container {
  position: relative;
}
.image-slot {
  background-color: #f8f8f8;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 32px;
}
</style>
